<!-- 主页 -->
<template>
  <div class="my-home">
    <!-- 二级路由插座开始 -->
    <div class="my-home-main">
      <router-view></router-view>
    </div>
    <!-- 二级路由插座结束 -->
    <!-- 底部tabbar开始 -->
    <div class="my-home-tabbar">
      <van-tabbar v-model="active" :active-color="icon.active" route>
        <van-tabbar-item to="/home/movies">
          <span>电影</span>
          <template #icon="props">
            <svg
              t="1647308158472"
              :fill="props.active ? icon.active : icon.inactive"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10489"
              width="20"
              height="20"
            >
              <path
                d="M844.832 885.344c-30.485333-20.714667-77.781333-18.965333-144.053333 9.386667A425.024 425.024 0 0 1 512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667a425.013333 425.013333 0 0 1-44.405334 189.717333 32 32 0 0 1-57.301333-28.490666A361.013333 361.013333 0 0 0 874.666667 512c0-200.298667-162.368-362.666667-362.666667-362.666667S149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667c56.704 0 111.488-13.013333 161.12-37.653334l1.6-0.746666c84.746667-36.437333 154.176-39.125333 206.08-3.861334a32 32 0 1 1-35.968 52.938667zM512 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m160 160a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM512 736a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM352 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z"
                p-id="10490"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/theaters">
          <span>影院</span>
          <template #icon="props">
            <svg
              t="1647309910412"
              class="icon"
              :fill="props.active ? icon.active : icon.inactive"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10986"
              width="16"
              height="16"
            >
              <path
                d="M830 831.1h99.1c16.1 0 32.4 2.1 32.2 22.7-0.2 19.3-15.8 20.8-31 20.7-31.9-0.2-63.8-0.1-95.8-0.1-62.7 0-62.7 0-120.6 41.6 11.3 0.8 19 1.7 26.6 1.7 63 0.1 126 0.1 189 0.1 16.2 0 32.6 1.7 31.8 22.6-0.7 18.9-16.5 20.7-31.6 20.7-144.5-0.3-289.1 2.7-433.4-1.7-224-6.9-410.3-183.3-430.2-401.5-21-230.4 126.1-434.3 350.2-485.3 253.3-57.6 509 120.2 541.4 375.9 17.8 140.1-21.1 262.1-114.5 367.3-3.2 3.6-6.2 7.2-13.2 15.3z m90-319.4c-0.3-225.7-182.8-407-409.6-406.9-221.4 0.1-405 185.1-404.4 407.3 0.7 223.7 185.7 407.3 408.7 405.6 224.2-1.7 405.6-183.4 405.3-406z"
                p-id="10987"
              ></path>
              <path
                d="M356.2 805.5c-65.7-0.3-115.1-50.9-114.7-117.5 0.4-64 51.4-114.6 115.6-114.6 65 0 116.7 51.7 116.5 116.8-0.1 65.1-51.4 115.5-117.4 115.3z m3.2-189.8c-39.8-1.5-74.6 31.4-75.9 71.8-1.3 40.3 31.2 74.8 71.6 75.9 40.5 1.1 74.4-30.8 76.1-71.7 1.6-39.7-31.2-74.4-71.8-76zM357.2 473c-65.9-0.1-115.9-50.3-115.7-116.5 0.1-65.3 51.8-116.4 117.1-115.8 63.5 0.6 114.8 52.2 115 115.8 0.3 65.3-50.9 116.6-116.4 116.5z m0.8-189.9c-40.2-0.4-74.2 33-74.5 73.3-0.3 40.4 33 74.5 73.1 74.7 40.3 0.3 74-32.7 74.7-73.3 0.6-39.7-33.2-74.3-73.3-74.7zM689.3 473c-65.7-0.2-115.6-50.8-115.3-117 0.3-65.2 52.3-116 117.7-115.3 63.4 0.7 114.7 52.7 114.6 116.4 0 65.2-51.4 116.1-117 115.9z m74.6-116.1c-0.3-40.2-34.2-73.9-74.3-73.8-40.2 0.1-73.5 33.6-73.7 74.3-0.2 40 34.2 74.1 74.1 73.7 40.7-0.6 74.2-34.2 73.9-74.2zM574 688.2c0.5-65.2 52.3-115.7 118-114.9 63.3 0.8 114.4 52.9 114.3 116.6-0.1 65.1-51.6 115.8-117.4 115.5-65.6-0.1-115.4-50.9-114.9-117.2z m189.9 0.6c-0.8-40.4-35-73.7-74.9-73.1-40.3 0.6-73.7 34.8-73.1 74.9 0.6 40.4 34.7 73.6 74.9 73 40.5-0.8 73.9-34.9 73.1-74.8zM512.6 562.1c-28.4-0.1-50.1-22-49.9-50.7 0.1-28.2 22.6-50.2 51-49.9 27.4 0.3 49.6 22.8 49.6 50.4 0 28.2-22.3 50.3-50.7 50.2z m32.3-50.3c-0.1-17.4-14.8-32-32.2-31.9-17.4 0-31.8 14.6-31.9 32.2-0.1 17.3 14.8 32.1 32.1 31.9 17.7-0.3 32.1-14.9 32-32.2z"
                p-id="10988"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/profile">
          <span>我的</span>
          <template #icon="props">
            <svg
              t="1647310207900"
              class="icon"
              :fill="props.active ? icon.active : icon.inactive"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11847"
              width="16"
              height="16"
            >
              <path
                d="M512 563.2c-127.9744 0-230.4-115.2512-230.4-256s102.4256-256 230.4-256 230.4 115.2512 230.4 256-102.4256 256-230.4 256z m0-51.2c98.2528 0 179.2-91.0592 179.2-204.8s-80.9472-204.8-179.2-204.8-179.2 91.0592-179.2 204.8 80.9472 204.8 179.2 204.8zM128 793.6a179.2 179.2 0 0 1 179.3792-179.2h409.2416C815.6416 614.4 896 694.7328 896 793.6a179.2 179.2 0 0 1-179.3792 179.2H307.3792C208.3584 972.8 128 892.4672 128 793.6z m51.2 0c0 70.5792 57.4464 128 128.1792 128h409.2416A128 128 0 0 0 844.8 793.6c0-70.5792-57.4464-128-128.1792-128H307.3792A128 128 0 0 0 179.2 793.6z"
                p-id="11848"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 底部tabbar结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      active: 0, // 激活的tab项
      icon: {
        active: "#be3634",
        inactive: "#535353",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.my-home {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .my-home-main {
    flex: 1;
    overflow: hidden;
  }

  .my-home-tabbar {
    height: 0.5rem;
  }
}
</style>